<template>
    <div>
        <el-row style="margin-bottom: 9px;margin-left: 15px" :gutter="20">
            <el-col :span="6">
                <el-button :disabled="!addFlag" size="small" type="primary" @click="dialogVisibleAdd=true">新增
                </el-button>
                <el-button :disabled="!deleteFlag" size="small" type="danger" @click="deleteBatch">批量删除</el-button>

            </el-col>
            <el-col style="display: flex" :span="6">
                <el-input
                        placeholder="请输入内容"
                        v-model="keywords"
                        clearable>
                </el-input>
                <el-button style="margin-left: 5px" type="success" plain>搜索</el-button>

            </el-col>
        </el-row>
        <el-card>
            <template>
                <el-table
                        @selection-change="handleSelectionChange"
                        size="mini"
                        :data="userList"
                        stripe
                        v-loading="loading"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>

                    <el-table-column
                            prop="id"
                            label="id"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="用户名"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="realname"
                            label="姓名"
                    >
                    </el-table-column>

                    <el-table-column
                            prop="email"
                            label="邮箱">
                    </el-table-column>

                    <el-table-column
                            prop="qq"
                            label="qq">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="电话号码">
                    </el-table-column>
                    <el-table-column
                            prop="identity"
                            label="身份">
                    </el-table-column>
                    <el-table-column
                            prop="formatTime"
                            label="注册时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template style="display: flex" slot-scope="scope">
                            <el-button
                                    :disabled="!updateFlag"
                                    style="margin-right: 5px"
                                    size="mini"
                                    @click="showEdit(scope.row)">编辑
                            </el-button>

                            <!--                                    <el-button>t</el-button>-->
                            <!--                            <el-popconfirm>1</el-popconfirm>-->
                            <!--                            <el-button-->
                            <!--                                    size="mini"-->
                            <!--                                    type="danger"-->
                            <!--                                    @click="handleDelete(scope.$index, scope.row)">删除-->
                            <!--                            </el-button>-->
                            <el-popconfirm
                                    @confirm="deleteType(scope.row)"
                                    title="这是一段内容确定删除吗？"
                            >

                                <el-button
                                        type="danger"
                                        :disabled="!deleteFlag"
                                        size="mini"
                                        @click="handleDelete(scope.$index, scope.row)"
                                        slot="reference">删除
                                </el-button>
                            </el-popconfirm>

                            <!--        修改对话框-->
                            <el-form :model="formEdit" :rules="rulesEdit" ref="formEditRef" label-width="100px"
                                     class="demo-ruleForm">

                                <el-dialog
                                        @close="clearEdit(formAddRef)"
                                        title="修改用户信息"
                                        :visible.sync="dialogVisibleEdit"
                                        width="60%"
                                >
                                    <el-form-item label="姓名" prop="realname">
                                        <el-input v-model="formEdit.realname"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="password">
                                        <el-input v-model="formEdit.password"></el-input>
                                    </el-form-item>
                                    <el-form-item label="邮箱" prop="email">
                                        <el-input v-model="formEdit.email"></el-input>
                                    </el-form-item>
                                    <el-form-item label="qq" prop="qq">
                                        <el-input v-model="formEdit.qq"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话号码" prop="phone">
                                        <el-input v-model="formEdit.phone"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="type" label="类别">
                                        <el-radio-group v-model="formEdit.type">
                                            <el-radio label="1">管理员</el-radio>
                                            <el-radio label="0">游客</el-radio>
                                        </el-radio-group>
                                    </el-form-item>


                                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleEdit = false">取 消</el-button>
    <el-button type="primary" @click="submitEdit(scope.row)">确 定</el-button>
  </span>
                                </el-dialog>
                            </el-form>

                            <!--        修改对话框结束-->
                        </template>
                    </el-table-column>
                </el-table>
            </template>

        </el-card>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[1, 5, 10, 20]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--        新增对话框开始-->
        <el-form :model="formAdd" :rules="rulesAdd" ref="formAddRef" label-width="100px" class="demo-ruleForm">

            <el-dialog
                    @close="clearAdd(formAddRef)"
                    title="新增分类"
                    :visible.sync="dialogVisibleAdd"
                    width="30%"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="formAdd.username"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="realname">
                    <el-input v-model="formAdd.realname"></el-input>
                </el-form-item>
                <el-form-item prop="type" label="类别">
                    <el-radio-group v-model="formAdd.type">
                        <el-radio label="1">管理员</el-radio>
                        <el-radio label="0">游客</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="formAdd.email"></el-input>
                </el-form-item>
                <el-form-item label="qq" prop="qq">
                    <el-input v-model="formAdd.qq"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="phone">
                    <el-input v-model="formAdd.phone"></el-input>
                </el-form-item>

                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleAdd = false">取 消</el-button>
    <el-button type="primary" @click="add('formAddRef')">确 定</el-button>
  </span>
            </el-dialog>
        </el-form>

        <!--        新增对话框结束-->

    </div>
</template>

<script>

    export default {
        watch: {
            keywords: function (newval, oldval) {
                console.log(newval)
                console.log(oldval)
                this.keywords = newval;
                this.getUserInfo();
            }


        },
        data() {
            return {
                loading: true,
                addFlag: false,  // false是展示
                updateFlag: false,
                deleteFlag: false,
                userList: [
                    // {
                    //     name: "xxxxx",
                    //     type: "222"
                    // }
                ],  // 分类数据
                dialogVisibleAdd: false,
                dialogVisibleEdit: false,
                formAdd: {  // 添加对话框
                    // name: "",
                    // typeImg: "",
                    // description: ""

                },
                formEdit: {  // 修改对话框
                    realname: "",
                    password: "",
                    email: "",
                    qq: "",
                    phone: "",
                    type: 0,
                    id: 0

                },
                srcList: [],  // 放大
                ids: [],  // 批量删除数组
                currentPage4: 1,  // 当前页
                size: 10, // 每页的个数
                fileList: [],
                total: 100,// 总条数
                keywords: "", // 搜索关键字
                rulesAdd: {
                    name: [
                        {required: true, message: '请输入分类', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    description: [
                        {required: true, message: '请输入描述', trigger: 'blur'},
                    ],

                },
                rulesEdit: {
                    name: [
                        {required: true, message: '请输入分类', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    description: [
                        {required: true, message: '请输入描述', trigger: 'blur'},
                    ],
                }
            }
        },
        created() {
            console.log(JSON.parse(localStorage.getItem('permissionList')))
            let permissionList = JSON.parse(localStorage.getItem('permissionList'))
            for (let i = 0; i < permissionList.length; i++) {
                if (this.$route.path == permissionList[i].permissionPath) {  // 如果当前的页面是当前遍历的权限数据
                    let children = permissionList[i].children;  // 就取出相应的数据
                    console.log(children)
                    for (let j = 0; j < children.length; j++) {
                        console.log(children[j].permissionCode)
                        if (children[j].permissionCode.indexOf('user:add') !==-1 ) { // 匹配到了
                            console.log('addtest')
                            this.addFlag = true;
                            console.log(this.addFlag)
                        } else if (children[j].permissionCode.indexOf('user:delete') !==-1) {
                            this.deleteFlag = true;
                        } else if (children[j].permissionCode.indexOf('user:update')  !==-1) {
                            this.updateFlag = true;
                        }
                    }
                }
            }

            this.getUserInfo();
        },
        methods: {
            showEdit(row) {  // 展开修改对话框
                this.dialogVisibleEdit = true;
                this.formEdit.realname = row.realname;

                this.formEdit.email = row.email;
                this.formEdit.qq = row.qq;
                // this.formEdit.create
                this.formEdit.id = row.id;
                this.formEdit.phone = row.phone;
                this.formEdit.type = row.type;
                // this.$http.put('')
            },
            async getUserInfo() {  //

                let keywords = this.keywords || "";
                const {data: res} = await this.$http.get('/admin/user?index=' + this.currentPage4 + '&size=' + this.size
                    + "&keywords=" + keywords)
                if (res.meta.status === 200) {
                    this.loading = false;
                }else {
                    this.$message.error(res.meta.msg)
                }
                console.log(res);
                console.log("1111");
                console.log(res.data.userList)
                this.total = res.data.total;
                this.userList = res.data.userList;
            },
            upload(response, file, fileList) { // 分类上传成功后的钩子
                console.log(response)
                console.log(file)
                this.formAdd.typeImg = response.data;  // 上传成功后的名字
                console.log(fileList);
            }
            ,
            uploadEdit(respose, file, fileList) {  // 编辑分类上传成功的钩子
                this.formEdit.typeImg = respose.data;  // 上传成功后的名字
                console.log(respose);
            }
            ,
            add(formAddRef) {  // 添加对话框里的确定
                // console.log(formAddRef);
                this.$refs[formAddRef].validate(async (valid) => { // 前端校验
                        if (valid) {
                            const {data: res} = await this.$http.post('/admin/user', this.formAdd)
                            console.log(res);
                            if (res.meta.status === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                })
                                this.dialogVisibleAdd = false;
                                this.getUserInfo(); // 重新刷新数据

                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.meta.msg
                                })
                                this.dialogVisibleAdd = false;
                            }

                        } else {
                            this.$message({
                                type: 'error',
                                message: '请检查！'
                            })
                            return false;
                        }
                    }
                );
                // this.dialogVisibleAdd = true;
                this.$refs[formAddRef].resetFields();

            }
            ,
            clearAdd(formAddRef) {  // 清除添加对话框的校验效果/上次表单信息
                // console.log(formAddRef)
                // this.$nextTick(() => {
                //     this.$refs[formAddRef].resetFields();
                //
                // })
                this.formAdd = {};
                // console.log('22221321')
            },
            clearEdit(formEditRef) {
                this.formEdit.password = ""
                this.$refs[formAddRef].resetFields();

            }
            ,
            async deleteType(row) {
                // console.log(row);
                // console.log(row.id)
                const {data: res} = await this.$http.delete('/admin/user/' + row.id)
                console.log(res);
                if (res.meta.status === 200) {
                    this.$message.success('删除成功！')
                    this.getUserInfo();
                } else {
                    this.$message.error(res.meta.msg);
                }
            }
            ,
            async submitEdit() {  // 修改对话框确定按钮
                // console.log(row);
                const {data: res} = await this.$http.put('/admin/user', this.formEdit);
                console.log(res.meta.status);
                if (res.meta.status === 200) {
                    this.$message.success("修改成功");
                    this.getUserInfo();
                    this.dialogVisibleEdit = false;
                } else {
                    this.$message.error(res.meta.msg);
                }
                this.dialogVisibleEdit = false;
            }
            ,
            handleSizeChange(size) { // 每页的个数
                this.size = size;
                this.getUserInfo()

            }
            ,
            handleCurrentChange(index) {
                this.currentPage4 = index;
                this.getUserInfo()

            }
            ,// 当前第几页
            handleSelectionChange(val) {  // 复选框
                console.log(val)
                for (let i = 0; i < val.length; i++) {
                    this.ids[i] = val[i].id;
                }
            }
            ,
            async deleteBatch() {  // 批量删除
                let length = this.ids.length
                if (length == 0) {
                    this.$message.info('请选择数据')
                    return;
                }
                console.log(this.ids)
                const {data: res} = await this.$http.post('/admin/user/deletebatch', this.ids);
                if (res.meta.status === 200) {
                    this.$message.success('批量删除成功！');
                    this.getUserInfo();
                    this.ids = []
                } else {
                    this.$message.error(res.meta.msg);
                }

            }
            ,
            async getTypeInfoByKey() {
                const {data: res} = await this.$http.post('/admin/type/', this.ids);

            }
        }
    }
</script>


<style scoped>

</style>